<template>
  <div>
    <div class="banner">
    <el-carousel height="415px">
        <el-carousel-item v-for="(item,i) in lunbotu" :key="i">
                <img :src="item.picUrl" alt=""> 
        </el-carousel-item>
    </el-carousel>
    </div>

    <div v-for="(item,i) in allList" :key="i">
        <div class="ad" v-if="item.type==1">
            <ul>
                <li v-for="(it1,i) in item.panelContents" :key="i"> 
                    <img :src="it1.picUrl" alt="">
                </li>
            </ul>
        </div>
<!-- 热门商品 -->
        <div class="hotdetail" v-if="item.type==2">
            <div class="hotdetail_menu">{{item.name}}</div>
            <div class="hotdetail_main">
                <ul>
                    <li v-for="(hotDetail,hot) in item.panelContents" :key="hot">
                        <img :src="hotDetail.picUrl" alt="">
                        <p>{{hotDetail.productName}}</p>
                        <span>￥{{hotDetail.salePrice}}</span>
                    </li>
                </ul>
            </div>
        </div>
<!-- 官方精选 -->
<div class="official" v-if="item.type==3">
    <div class="official_menu">{{item.name}}</div>
    <div class="officialMain">
      <ul>
        <template v-for="(bigImg,i) in item.panelContents" >
        <li style="width:580px;" class="BIG"  :key='i' v-if="bigImg.type==3||bigImg.type==2">
          <img :src="bigImg.productImageBig" />
        </li>
        </template>
        <template v-for="(mallImg,i) in item.panelContents" >
        <li :key="i" v-if="mallImg.type==0">
          <img
            :src="mallImg.productImageBig"
            style="width:150px;"
            
          />
          <p>{{mallImg.productName}}</p>
          <span>{{mallImg.salePrice}}</span>
        </li>
    </template>
      </ul>
    </div>
  </div>
</div>


    
    
    <div class="selectDetail"></div>
  </div>
</template>

<script>
import { styleAliases } from 'js-yaml/lib/js-yaml/type/str'

export default {
    data() {
        return {
            allList:[],
            lunbotu:[],
           
        }
    },
    
    created(){
        this.getData()
      
    },
    methods:{
        getData(){
            this.$axios.get('http://api.mm2018.com:8090/api/goods/home')
            .then(res=>{
                this.allList = res.data.result
                
                this.lunbotu = this.allList[0].panelContents
                // console.log(res.data.result[0].panelContents)
                
            })
        }
    }
}
</script>

<style scoped>
    .banner{
        width: 1120px;
        height: 415px;
        /* background: #000; */
        margin: 0 auto;
        margin-top: 20px;
        border-radius: 10px;
        overflow: hidden;

    }
    ul{
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }
    .ad{
        width: 1120px;
        height: 180px;
        margin: 20px auto;
        background: #000;
        border: 1px solid #ccc;
        border-radius: 10px;
        overflow: hidden;
    }
    .ad ul{
        width: 100%;
        display: flex;
    
    }
    .ad ul li{
        flex: 1;
    }
    .ad ul li img{
        width: 100%;
    }
    .hotdetail{
        width: 1120px;
        height: auto;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 10px;
        overflow: hidden;
    }
    .hotdetail_menu{
        height: 51px;
        border-bottom: 1px solid #ccc;
        line-height: 51px;
        text-indent: 30px;
    }
    .hotdetail_main{
        width: 100%;
       
    }
    .hotdetail_main ul{
        display: flex;
        
    }
    .hotdetail_main ul li{
        flex: 1;
        text-align: center;
    }
    .hotdetail_main ul li span{
       color: red;
        display: block;
        text-align: center;
    }
    .hotdetail_main ul li p{
        text-align: center;
        
    }
    .hotdetail_main ul li img{
        display: bloBIG;
        width: 170px;
        margin: 30px auto;
    }
    .BIG img {
        display: block;
        width: 580px;
        margin: 0 !important;
        padding: 0px !important;
    }
    .official {
        width: 1120px;
        height: auto;
        margin: 0 auto;
        margin-top: 25px;
        border-radius: 15px;
        overflow: hidden;
        border: 1px solid #dbdbdb;
    }

    .officialMain {
        width: 1120px;
        height: 716px;
        background: #fff;
    }

    .officialMain ul {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
    }

    .officialMain ul li {
        width: 284px;
        box-sizing: border-box;
        background: #fff;
        height: 350px;
        margin-bottom: 16px;
        overflow: hidden;
        text-align: center;
    }

    .officialMain ul li img {
        display: block;
        margin: 0 auto;
        margin-top: 50px;
    }

    .officialMain ul li:hover img {
        opacity: 0.8;
    }

    .officialMain ul li p {
        padding-bottom: 15px;
        padding-top: 20px;
    }

    .officialMain ul li span {
        color: red;
    }

    .official_menu {
        width: 1120px;
        height: 50px;
        background: #fafafa;
        line-height: 50px;
        text-indent: 30px;
        border-bottom: 1px solid #e1e1e1;
    }

    .official_main {
        width: 1120px;
    }

    .official_main ul {
        display: flex;
        justify-content: space-between;
    }

    .official_main ul li {
        width: 586px;
        height: 350px;
        background: #fff;
        text-align: center;
    }

    .official_main ul li img {
        display: block;
        margin: 0 auto;
        width: 170px;
        height: 170px;
        margin-top: 35px;
    }

    .official_main ul li p {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .official_main ul li span {
        color: red;
    }
</style>